<template>
  <div>
    <pform ref="form" :model="form" >
      <el-form-item label="区域">
        <el-select style="width:233px;" v-model="form.area" placeholder="请选择区域">
          <el-option label="东南中心" value="dn"></el-option>
          <el-option label="南方中心" value="nf"></el-option>
          <el-option label="北方中心" value="bf"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="可用分区">
        <el-radio-group v-model="form.usable">
          <el-radio-button label="裸金属资源池"></el-radio-button>
        </el-radio-group>
      </el-form-item>
      <div class="form-br"></div>
      <el-form-item label="规格">
        <div class="role-desbox">
          <div v-show="form.usable!='可用区3'">
            <div class="esclist esclist-t">
              <div class="e-item">规格名称</div>
              <div class="e-item">CPU</div>
              <div class="e-item">内存</div>
              <div class="e-item">磁盘</div>
              <div class="e-item">网口标签</div>
            </div>
            <div class="esclist">
              <div class="e-item"><el-radio v-model="form.norms" label="1" style="margin-right: 10px;">{{ '' }}</el-radio>physical.o3</div>
              <div class="e-item e-item-2"><div>160 core</div><div style="color: #7f7f7f;">CPU 160</div></div>
              <div class="e-item e-item-2"><div>250 GB</div><div style="color: #7f7f7f;">MEM262144</div></div>
              <div class="e-item e-item-2"><div>599 Gb</div><div style="color: #7f7f7f;">DISK599</div></div>
              <div class="e-item">--</div>
            </div>
            <div class="flex-c" style="margin-top: 10px;line-height: 20px;"><div style="margin-right: 50px;">当前规格</div><div>physical.o3 |160 核 |256GB</div></div>
            <div class="escplasin" style="line-height: 30px;">如需创建新规格，请联系管理员创建</div>
          </div>
        </div>
      </el-form-item>
      <div class="form-br"></div>
      <el-form-item label="镜像">
        <el-radio-group v-model="form.mirror" @change="mirrorChange" style="margin-bottom: 20px;">
          <el-radio-button label="公共镜像"></el-radio-button>
          <el-radio-button label="私有镜像"></el-radio-button>
        </el-radio-group>
        <div class="flex-c" v-show="form.mirror=='公共镜像'">
          <el-select size="small" style="width:267px;margin-right: 80px;" v-model="form.OS" placeholder="请选择操作系统">
            <el-option v-for="item in option1" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-select size="small" style="width:267px;" v-model="form.OSType" placeholder="请选择操作系统版本">
            <el-option v-for="item in option2" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
        <div class="flex-c" v-show="form.mirror=='私有镜像'">
          <el-select size="small" style="width:267px;margin-right: 80px;" v-model="form.morType" placeholder="请选择镜像类别">
            <el-option v-for="item in option3" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-select size="small" style="width:267px;" v-model="form.morName" placeholder="请选择镜像名称">
            <el-option v-for="item in option4" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <i style="font-size: 25px;margin:0 10px 0 30px;" class="el-icon-refresh-right" @click="resetMor"></i>
          <div class="btntext" @click="createMOR">新建私有镜像</div>
        </div>
      </el-form-item>

      <div class="form-br"></div>
      <el-form-item label="必须同一存储">
        <el-radio-group v-model="form.isUnity">
          <el-radio label="是"></el-radio>
          <el-radio label="否"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="云硬盘">
        <div style="min-height: 80px;">
          <div>
            <div class="flex-c" v-show="hasTag">
              <pbtn class="mr15" @click="delTag" iname="minus"></pbtn>
              <div>
                大小: <el-input-number size="small" style="width:215px" v-model="form.yunSize" :min="1" :max="200"></el-input-number> GB
              </div>
              <div style="margin-left: 40px;">
                数量: <el-input-number size="small" style="width:215px" v-model="form.yunNum" :min="1" :max="200"></el-input-number>
              </div>

            </div>
          </div>
          <div class="flex-c">
            <pbtn class="mr15" @click="hasTag=true"></pbtn>
            <div>
              添加标签
            </div>
          </div>
        </div>
      </el-form-item>

      <div class="form-br"></div>

      <el-form-item label="注册数量">
        <div class="flex-c">
          <el-input-number size="small" style="width:215px" v-model="form.createNum" :min="1" :max="200"></el-input-number>
          <div class="explain">
            一次最多支持申请200台
          </div>
        </div>
      </el-form-item>
    </pform>
  </div>
</template>

<script>
// import pform from '@/components/publicForm.vue'
  export default {
    // components:{pform},
    data() {
      return {
        hasTag: false,
        form: {
          area: '',
          usable: '裸金属资源池',
          norms: '1', // 规格
          mirror: '公共镜像', // 镜像
          OS: '',
          OSType: '',
          morType: '',
          morName: '',
          isUnity:'是', // 同一存储
          yunSize:1,
          yunNum:1,
          createNum: 1
        },
        // option1操作系统 option2操作系统 option3操作系统 option4操作系统
        option1:[
          {label:'CentOS',value:'CentOS'},
          {label:'Ubuntu',value:'Ubuntu'},
          {label:'Windows',value:'Windows'},
        ],
        option2:[
          {label:'Ubuntu 1804 x86 server 64bit sdi2 for BareMetal With Uniagen',value:'CentOS'},
          {label:'Ubuntu 1804 x86 server 64bit sdi2 for BareMetal With Uniagen',value:'Ubuntu'},
          {label:'Ubuntu 1804 x86 server 64bit sdi2 for BareMetal With Uniagen',value:'Windows'},
        ],
        option3:[
          {label:'请选择镜像类别',value:'请选择镜像类别'},
          {label:'操作系统',value:'操作系统'},
          {label:'数据库与缓存',value:'数据库与缓存'},
          {label:'应用运行环境',value:'应用运行环境'},
          {label:'管理与监控',value:'管理与监控'},
          {label:'网络与安全',value:'网络与安全'},
          {label:'开发语言环境',value:'开发语言环境'},
          {label:'中间件等',value:'中间件等'},
        ],
        option4:[
          {label:'Check Point CloudGuard',value:'CentOS'},
          {label:'Check Point CloudGuard',value:'Ubuntu'},
          {label:'Check Point CloudGuard',value:'Windows'},
        ],
      }
    },
    methods: {
      init() {},
      getFormData() {
        return JSON.parse(JSON.stringify(this.form))
      },
      delTag() {
        this.hasTag = false
        this.form.tagKey = ''
        this.form.tagVal = ''
      },
      mirrorChange(val) {
        this.form.OS = ''
        this.form.OSType = ''
        this.form.morType = ''
        this.form.morName = ''
      },
      resetMor(){
        this.form.morType = ''
        this.form.morName = ''
      },
      // 新建镜像
      createMOR(){}
    }

  }
</script>

<style scoped lang="less">
  .role-desbox {
    width: 932px;
    min-height: 125px;

    .escplasin {
      font-size: 12px;
      color: #AAAAAA;
    }

    .esclist {
      height: 50px;
      display: flex;
      align-items: center;

      .e-item {
        color: #333333;
        width: 160px;
        text-align: center;
      }
      .e-item-2{
        display: flex;
        flex-flow: column nowrap;
        div{
          height: 25px;
          line-height: 25px;
        }
      }
    }

    .esclist-t {
      height: 35px;
      background-color: rgba(242, 242, 242, 1);
    }

  }
</style>
